<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>

    <el-row class="header ">
        <div class="btn-group tool-button mt5">
            <el-select
                    v-model="pageForm.fromUser"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="来源用户(请输入手机号码或用户昵称"
                    :remote-method="fromUserGetAccounts"
                    :loading="loading">
                <el-option
                        v-for="item in fromUserOptions"
                        :key="item.userId"
                        :label="item.label"
                        :value="item.userId">
                </el-option>
            </el-select>
            <el-select
                    v-model="pageForm.toUser"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="收礼用户(请输入手机号码或用户昵称"
                    :remote-method="toUserGetAccounts"
                    :loading="loading">
                <el-option
                        v-for="item in toUserOptions"
                        :key="item.userId"
                        :label="item.label"
                        :value="item.userId">
                </el-option>
            </el-select>

            <el-select v-model="pageForm.sumToBalance"
                       palceholder="结算状态筛选">
                <el-option value="" label="所有" value="" selected>所有</el-option>
                <el-option value="1" label="已结算" value="1" selected>已结算</el-option>
                <el-option value="0" label="未结算" value="0" selected>未结算</el-option>
            </el-select>
        </div>

        <div class="pull-right offscreen-right mt5">
            <el-button size="medium" @click="settlementMore" type="primary" :disabled="selectData.length==0">
                <i class="el-icon-edit"></i>
                结算
            </el-button>
        </div>
        <!--搜索按钮-->
        <div class="btn-group tool-button mt5">
            <el-button slot="append" icon="el-icon-search" @click="pageData"></el-button>
        </div>
    </el-row>

    <el-row class="el-table-container">
        <el-table
                :data="tableData"
                @sort-change='pageOrder'
                size="small"
                header-align="center"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :default-sort="{prop: 'opAt', order: 'descending'}"
        >
            <el-table-column
                    type="selection"
                    width="35"
                    :selectable="checkSelectable"
            >
            </el-table-column>

            <el-table-column label="送礼人" header-align="left" prop="fromUserName"
                             :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column label="主播" header-align="left" prop="toUserName"
                             :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column label="礼物" header-align="left" prop="giftName"
                             :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column label="数量" header-align="left" prop="count"
                             :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column label="总额" header-align="left" prop="amount"
                             :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column label="主播所得" header-align="left" prop="resultAmount"
                             :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{null==scope.row.resultAmount?'未结算':scope.row.resultAmount}}
                </template>
            </el-table-column>

            <el-table-column sortable label="创建时间" header-align="center" align="center" prop="opAt">
                <template slot-scope="scope">
                    {{formatAt(scope.row.opAt)}}
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row class="el-pagination-container">
        <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageNumberChange"
                :current-page="pageForm.pageNumber"
                :page-sizes="[10, 20, 30, 50,100,1000]"
                :page-size="pageForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageForm.totalCount">
        </el-pagination>
    </el-row>

</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                addDialogVisible: false,
                editDialogVisible: false,
                selectData: [],
                pageForm: {
                    searchName: "",
                    searchKeyword: "",
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0,
                    pageOrderName: "opAt",
                    pageOrderBy: "descending"
                },
                tableData: [],
                formData: {
                    id: null,
                },
                formRules: {
                    toUser: [
                        {required: true, message: '充值对象', trigger: 'blur'}
                    ],
                    amount: [
                        {required: true, message: '金额', trigger: 'blur'}
                    ]
                },
                fromUserOptions: [],
                toUserOptions: [],
                loading: false,
                queryParams: {},
                selectData: [],
            }
        },
        methods: {
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/gift/order/manager/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            formatAt: function (val) {
                if (val > 0)
                    return moment(val * 1000).format("YYYY-MM-DD HH:mm");
                return "";
            },
            checkSelectable: function (row) {
                return !row.sumToBalance
            },
            handleSelectionChange: function (val) {
                this.selectData = val;
            },
            settlement: function (id) {
                var self = this;
                self.addDialogVisible = true;
                //打开新增窗口,表单先清空
                self.formData = {};
                this.formData.id = id;
                if (null != id) {
                    $.post(base + "/platform/gift/order/manager/edit", {id}, function (data) {
                        if (data.code == 0) {
                            self.formData = data.data;//加载后台表单数据
                        }
                    }, "json");


                }
                if (self.$refs["addForm"])
                    self.$refs["addForm"].resetFields();
            },
            doAdd: function () {
                if (null != this.formData.id) {
                    this.doEdit();
                    return;
                }
                var self = this;
                var url = base + "/platform/gift/order/manager/add";
                self.$refs["addForm"].validate(function (valid) {
                    if (valid) {//表单验证通过
                        $.post(url, self.formData, function (data) {
                            if (data.code == 0) {
                                self.addDialogVisible = false;
                                self.pageData()
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.addDialogVisible = false;
                                self.pageData();
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            dropdownCommand: function (command) {//监听下拉框事件
                if ("edit" == command.type) {
                    this.settlement(command.id);
                } else
                    $.post(base + "/platform/gift/order/manager/" + command.type, command, function (data) {
                        if (data.code == 0) {
                            self.formData = data.data;//加载后台表单数据
                            self.editDialogVisible = true;//打开编辑窗口
                            this.pageData()
                        }
                    }, "json");
                this.pageData()
            },
            fromUserGetAccounts: function (str) {
                var _this = this;
                $.post(base + "/platform/user/manager/searchAccount", {key: str}, function (data) {
                    data.data.list.unshift({
                        nickName:"空",
                        phone:"选",
                        balance:"项"
                    });
                    _this.fromUserOptions = data.code === 0 ? data.data.list.map(ite => {
                            // ite.label =ite.nickName+'#<span style="color: darkblue">'+ite.phone+'</span>$<span style="color: darkred">'+ite.balance+'</span>'
                            ite.label = ite.nickName + '#' + ite.phone + '$' + ite.balance;
                            return ite
                        }
                    ) : [];
                }, "json");
            },
            toUserGetAccounts: function (str) {
                var _this = this;
                $.post(base + "/platform/user/manager/searchAccount", {key: str}, function (data) {
                    data.data.list.unshift({
                        nickName:"空",
                        phone:"选",
                        balance:"项"
                    });
                    _this.toUserOptions = data.code === 0 ? data.data.list.map(ite => {
                            // ite.label =ite.nickName+'#<span style="color: darkblue">'+ite.phone+'</span>$<span style="color: darkred">'+ite.balance+'</span>'
                            ite.label = ite.nickName + '#' + ite.phone + '$' + ite.balance;
                            return ite
                        }
                    ) : [];
                }, "json");
            },
            handlePicSuccess: function (response, file, fileList, attrName) {
                if (response.code == 0) {
                    // 对象属性直接赋值不会触发试图更新，采用 Vue.set 、this.$set或者Object.assign({}，this.obj)创建新对象
                    // 或者也可以定义一个 refresh 属性 ，当数据发生改变时，该属性同时变化，也会触发视图更新
                    // this.formData.site_logo =response.data;
                    this.$set(this.formData, attrName, response.data);
                } else {
                    this.$set(this.formData, attrName, "");
                }
            },
            change: function (row) {
                $.post(base + "/platform/gift/order/manager/disable", {
                    disable: row.disabled,
                    id: row.id
                }, function (data) {
                    this.pageData()
                })
            },
            handleSelectionChange: function (val) {
                this.selectData = val;
            },
            settlementMore: function () {
                var self = this;
                if (self.selectData.length == 0) {
                    self.$message({
                        message: "请选择订单",
                        type: 'warning'
                    });
                    return false;
                }
                var ids = [];
                self.selectData.forEach(function (val) {
                    ids.push(val.id);
                });
                self.$confirm('您确定要结算选中的 ' + ids.length + ' 条记录？ ', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    callback: function (a, b) {
                        if ("confirm" == a) {//确认后再执行
                            $.post(base + "/platform/gift/order/manager/settlement", {ids: ids.toString()}, function (data) {
                                if (data.code == 0) {
                                    self.$message({
                                        message: data.msg,
                                        type: 'success'
                                    });
                                    self.pageData();
                                } else {
                                    self.$message({
                                        message: data.msg,
                                        type: 'error'
                                    });
                                }
                            }, "json");
                        }
                    }
                });
            },
        },
        created: function () {
            this.pageData();
        }
    });
</script>
<!--#
}
#-->